<!--
  文件描述：欢迎页面 - 中医适宜技术防控青少年近视系统宣传页面
  作者：XXX
  创建日期：2023-10-01
  最后修改日期：2025-01-27
  版本：2.0.0
  版权信息：© 2023 XXX公司
  文件名称及存储路径：frontend/templates/welcome.html
  功能说明：
    1. 系统对外宣传页面，展示中医文化和技术特色
    2. 提供用户登录和注册功能
    3. 展示视力健康数据和项目成果
    4. 介绍耳穴压丸疗法和筛查要求
-->
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>中医适宜技术防控青少年近视系统 - 数据统计分析系统</title>
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='css/welcome.css') }}"
    />
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
  </head>
  <body>
    <!-- 背景层 -->
    <div class="background">
      <!-- 星星背景效果 -->
      <div class="stars"></div>
    </div>

    <!-- 顶部导航栏 -->
    <header class="top-header">
      <div class="header-content">
        <div class="logo-section">
          <i class="bi bi-eye-heart-fill"></i>
          <h1>中医适宜技术防控青少年近视系统</h1>
        </div>
        <div class="auth-buttons">
          <button id="login-button" class="btn-primary">
            <i class="bi bi-box-arrow-in-right"></i>
            登录系统
          </button>
          <button id="register-button" class="btn-secondary">
            <i class="bi bi-person-plus"></i>
            注册账号
          </button>
        </div>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
      <!-- 英雄区域 -->
      <section class="hero-section">
        <div class="hero-content">
          <h2 class="hero-title">用数据守护青少年视力健康</h2>
          <p class="hero-subtitle">弘扬中医中药文化 护佑龙江百姓健康 防控儿童青少年近视</p>
          <div class="hero-stats">
            <div class="stat-item">
              <span class="stat-number" id="total-students">--</span>
              <span class="stat-label">服务学生</span>
            </div>
            <div class="stat-item">
              <span class="stat-number" id="total-vision">--</span>
              <span class="stat-label">视力记录</span>
            </div>
            <div class="stat-item">
              <span class="stat-number" id="total-intervention">--</span>
              <span class="stat-label">干预治疗</span>
            </div>
            <div class="stat-item">
              <span class="stat-number" id="improvement-rate">--%</span>
              <span class="stat-label">改善率</span>
            </div>
          </div>
        </div>
      </section>

      <!-- 技术特色区域 -->
      <section class="features-section">
        <div class="container">
          <h3 class="section-title">技术特色</h3>
          <div class="features-grid">
            <div class="feature-card">
              <div class="feature-icon">
                <i class="bi bi-heart-pulse"></i>
              </div>
              <h4>耳穴压丸疗法</h4>
              <p>传统中医技术的现代应用，通过刺激耳穴调节经络及脏腑气血功能</p>
            </div>
            <div class="feature-card">
              <div class="feature-icon">
                <i class="bi bi-graph-up"></i>
              </div>
              <h4>精准数据分析</h4>
              <p>基于大数据分析，提供精准的视力健康评估和干预建议</p>
            </div>
            <div class="feature-card">
              <div class="feature-icon">
                <i class="bi bi-shield-check"></i>
              </div>
              <h4>科学防控体系</h4>
              <p>建立完整的视力健康管理体系，从筛查到干预的全流程跟踪</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 数据展示区域 -->
      <section class="data-section">
        <div class="container">
          <h3 class="section-title">视力健康趋势</h3>
          <div class="chart-container">
            <div class="chart-wrapper">
              <canvas id="leftEyeChart"></canvas>
            </div>
            <div class="chart-wrapper">
              <canvas id="rightEyeChart"></canvas>
            </div>
          </div>
        </div>
      </section>

      <!-- 项目背景区域 -->
      <section class="project-section">
        <div class="container">
          <div class="project-content">
            <div class="project-text">
              <h3>项目背景</h3>
              <p>近视是全球重大公共卫生问题，在我国呈低龄、高发、进展快的特征，已成为影响国民健康素质的重大问题。中医药在近视防控领域具有不可替代的优势，在"治未病"思想指导下，采用中医药特色诊疗技术对近视不同阶段进行干预。</p>
              <p>为深入贯彻习近平总书记关于学生近视问题的系列重要指示批示精神，按照国家卫生健康委、国家中医药管理局联合开展中医适宜技术防控儿童青少年近视的要求，（祖研）曲线中心作为试点单位，将为辖区内6-12岁视力不良学生开展中医预防保健服务。</p>
            </div>
            <div class="project-image">
              <img src="{{ url_for('static', filename='images/ear.jpg') }}" alt="耳穴压丸疗法">
            </div>
          </div>
        </div>
      </section>

      <!-- 技术介绍区域 -->
      <section class="technique-section">
        <div class="container">
          <h3 class="section-title">耳穴压丸疗法详解</h3>
          <div class="technique-content">
            <div class="technique-method">
              <h4><i class="bi bi-gear"></i> 操作方法</h4>
              <p>将耳廓皮肤用75%酒精棉球消毒，用磁疗贴固定在所选耳穴上，将拇指放在耳廓背面、食指和中指放在耳廓前面，每天按压所贴耳穴3-4次，每次每穴按压10到20下或1分钟左右，使之产生酸胀痛热等感觉，以加强对穴位的持续刺激，增强疗效。隔3-7天换药一次，两耳交替使用，12次为一疗程。</p>
            </div>
            <div class="technique-mechanism">
              <h4><i class="bi bi-lightbulb"></i> 作用机制</h4>
              <p>《灵枢・素问》曰"耳者宗脉之所聚也"，耳与五脏六腑、全身组织器官的生理功能和病理变化有直接或间接的联系，具有调节经络及脏腑气血的功能。耳穴是分布于耳廓上的腧穴，是全身各脏腑、器官生命信息的反应点。</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 筛查要求区域 -->
      <section class="screening-section">
        <div class="container">
          <h3 class="section-title">筛查要求</h3>
          <div class="screening-grid">
            <div class="screening-card">
              <h4><i class="bi bi-people"></i> 适用人群</h4>
              <p>筛查后确诊为近视前期或轻、中度近视的6-12岁儿童青少年；裸眼视力正常、屈光状态虽未达到近视标准，但偏离相应年龄段生理值范围，怀疑远视储备不足有近视高危因素的6-12岁儿童青少年。</p>
            </div>
            <div class="screening-card">
              <h4><i class="bi bi-check-circle"></i> 纳入标准</h4>
              <p>等效球镜度数SE⩾−6.00D；年龄6-12岁；双眼柱镜度均≤1.50D；双眼无影响视力的其它器质性病变。</p>
            </div>
            <div class="screening-card">
              <h4><i class="bi bi-x-circle"></i> 排除标准</h4>
              <p>影响视力的其他眼部疾病；严重的全身疾病；父母有一方或双方，单眼或双眼有病理性近视者；明确对胶布及王不留行籽过敏；其他因素导致不能配合检查及干预措施的。</p>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- 登录表单弹窗 -->
    <div id="login-form" class="modal-overlay" style="display:none;">
      <div class="modal-content">
        <div class="modal-header">
          <h3><i class="bi bi-box-arrow-in-right"></i> 系统登录</h3>
          <button class="close-btn" id="close-login">&times;</button>
        </div>
        <form class="login-form">
          <div class="form-group">
            <label for="username"><i class="bi bi-person"></i> 用户名</label>
            <input type="text" id="username" name="username" required placeholder="请输入用户名">
          </div>
          <div class="form-group">
            <label for="password"><i class="bi bi-lock"></i> 密码</label>
            <input type="password" id="password" name="password" required placeholder="请输入密码">
          </div>
          <div class="form-actions">
            <button type="submit" id="submit-login" class="btn-primary">
              <i class="bi bi-box-arrow-in-right"></i> 登录
            </button>
            <button type="button" id="cancel-login" class="btn-secondary">取消</button>
          </div>
        </form>
      </div>
    </div>

    <!-- 注册表单弹窗 -->
    <div id="register-form" class="modal-overlay" style="display:none;">
      <div class="modal-content">
        <div class="modal-header">
          <h3><i class="bi bi-person-plus"></i> 用户注册</h3>
          <button class="close-btn" id="close-register">&times;</button>
        </div>
        <form class="register-form">
          <div class="form-group">
            <label for="register-username"><i class="bi bi-person"></i> 用户名</label>
            <input type="text" id="register-username" name="register-username" required placeholder="请输入用户名">
          </div>
          <div class="form-group">
            <label for="register-password"><i class="bi bi-lock"></i> 密码</label>
            <input type="password" id="register-password" name="register-password" required placeholder="请输入密码">
          </div>
          <div class="form-group">
            <label for="register-password2"><i class="bi bi-lock-fill"></i> 确认密码</label>
            <input type="password" id="register-password2" name="register-password2" required placeholder="请再次输入密码">
          </div>
          <div class="form-actions">
            <button type="submit" id="submit-register" class="btn-primary">
              <i class="bi bi-person-plus"></i> 注册
            </button>
            <button type="button" id="cancel-register" class="btn-secondary">取消</button>
          </div>
        </form>
      </div>
    </div>

    <!-- 显示 flash 消息 -->
    {% with messages = get_flashed_messages() %}
      {% if messages %}
        <div class="alert alert-danger">
          <i class="bi bi-exclamation-triangle"></i>
          {{ messages[0] }}
        </div>
      {% endif %}
    {% endwith %}

    <script src="https://unpkg.com/chart.js@3.9.1/dist/chart.min.js"></script>
    <script src="https://unpkg.com/chartjs-plugin-datalabels@2.0.0/dist/chartjs-plugin-datalabels.min.js"></script>
    <script src="{{ url_for('static', filename='js/welcome.js') }}"></script>
  </body>
</html>
